/**
* @Description: 客户管理(客户)-详情
* @author  tangbin
* @date 2023/4/18
*/
<template>
  <div class="mh100">
    <div class="page-container">
      <div class="split-content-info" :style="{minHeight: height + 'px'}">
        <!-- 标题 -->
        <div class="split-content-title clearfix">
          <div class="split-title">
            <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
            <span style="display: inline-block; color: #333333; font-size: 16px;">基本信息</span>
          </div>
        </div>
        <div>
          <!-- 二网 -->
          <el-descriptions class="margin-top" :column="3" border v-if="form.type == 'NETWORK'">
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="渠道名称">{{ form.tenantName }}</el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="客户编码">{{ form.code }}</el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="客户名称">{{ form.name }}</el-descriptions-item>
            <el-descriptions-item label="客户类型">{{ getTypeName(form.type) }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ form.telephone }}</el-descriptions-item>
            <el-descriptions-item label="客户联系人">{{ form.contactName }}</el-descriptions-item>
            <el-descriptions-item label="联系人电话">{{ form.contactPhone }}</el-descriptions-item>
            <el-descriptions-item label="铺货额度">{{ getAmount(form.distributionLimit) }}</el-descriptions-item>
            <el-descriptions-item label="客户状态">{{ getStatusName(form.status) }}</el-descriptions-item>
            <el-descriptions-item label="地址" :span="3">{{ form.address }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="3">{{ form.remark }}</el-descriptions-item>
          </el-descriptions>
          <!-- 个人 -->
          <el-descriptions class="margin-top" :column="3" border v-if="form.type == 'PERSON'">
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="渠道名称">{{ form.tenantName }}</el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="客户编码">{{ form.code }}</el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="客户名称">{{ form.name }}</el-descriptions-item>
            <el-descriptions-item label="客户类型">{{ getTypeName(form.type) }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ form.telephone }}</el-descriptions-item>
            <el-descriptions-item label="客户联系人">{{ form.contactName }}</el-descriptions-item>
            <el-descriptions-item label="联系人电话">{{ form.contactPhone }}</el-descriptions-item>
            <el-descriptions-item label="是否记账">{{ form.accounting == 'Y' ? '是' : (form.accounting == 'N' ? '否' : '') }}</el-descriptions-item>
            <el-descriptions-item label="折扣">{{ getDiscountFormat(form.discount) }}</el-descriptions-item>
            <el-descriptions-item label="客户状态">{{ getStatusName(form.status) }}</el-descriptions-item>
            <el-descriptions-item label="" v-if="form.synchronizeFlag == true"></el-descriptions-item>
            <el-descriptions-item label="" v-if="form.synchronizeFlag == true"></el-descriptions-item>
            <!-- synchronizeFlag true接口同步 false系统自建 -->
            <el-descriptions-item label="创建时间" v-if="form.synchronizeFlag == false">{{ form.createTime }}</el-descriptions-item>
            <el-descriptions-item label="创建人" v-if="form.synchronizeFlag == false">{{ form.creatorName }}</el-descriptions-item>
            <el-descriptions-item label="地址" :span="3">{{ form.address }}</el-descriptions-item>
            <!-- 客户类型 NETWORK二网 PERSON个人 COMPANY单位 -->
            <!-- <el-descriptions-item label="备注" :span="3" v-if="type == 'NETWORK'">{{ form.remark }}</el-descriptions-item> -->
            <el-descriptions-item label="备注" :span="3">{{ form.remark }}</el-descriptions-item>
          </el-descriptions>
          
          <!-- 单位 -->
          <el-descriptions class="margin-top" :column="3" border v-if="form.type == 'COMPANY'">
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="渠道名称">{{ form.tenantName }}</el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="客户编码">{{ form.code }}</el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="客户名称">{{ form.name }}</el-descriptions-item>
            <el-descriptions-item label="客户类型">{{ getTypeName(form.type) }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ form.telephone }}</el-descriptions-item>
            <el-descriptions-item label="客户联系人">{{ form.contactName }}</el-descriptions-item>
            <el-descriptions-item label="联系人电话">{{ form.contactPhone }}</el-descriptions-item>
            <!-- <el-descriptions-item label="地址">{{ form.address }}</el-descriptions-item> -->
            <!-- <el-descriptions-item label="铺货额度" v-if="type == 'NETWORK'">{{ form.distributionLimit }}</el-descriptions-item> -->
            <!-- <el-descriptions-item label="备注" v-if="type == 'NETWORK'">{{ form.remark }}</el-descriptions-item> -->
            <el-descriptions-item label="是否记账">{{ form.accounting == 'Y' ? '是' : '否' }}</el-descriptions-item>
            <el-descriptions-item label="折扣">{{ getDiscountFormat(form.discount) }}</el-descriptions-item>
            <el-descriptions-item label="客户状态">{{ getStatusName(form.status) }}</el-descriptions-item>
            <el-descriptions-item label="" v-if="form.synchronizeFlag == true"></el-descriptions-item>
            <el-descriptions-item label="" v-if="form.synchronizeFlag == true"></el-descriptions-item>
            <!-- synchronizeFlag true接口同步 false系统自建 -->
            <el-descriptions-item label="创建时间" v-if="form.synchronizeFlag == false">{{ form.createTime }}</el-descriptions-item>
            <el-descriptions-item label="创建人" v-if="form.synchronizeFlag == false">{{ form.creatorName }}</el-descriptions-item>
            <el-descriptions-item label="地址" :span="3">{{ form.address }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="3">{{ form.remark }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>




      <div class="h84_line"></div>
      <div class="bottom-btn">
        <div class="bottom-locate" >
          <el-button type="primary" @click="cancel">返回</el-button>
        </div>
      </div>

    </div>
  </div>
</template>


<script>
import {getTimeSeconds, toThousandFilter} from '@/utils/index.js'
import {tenantCustomerDetail} from '@/api/basic/tenantCustomer.js'

export default {
  name: 'CustomersManageDetail',
  dicts: ['basic_data_tenant_customer_type', 'basic_data_tenant_customer_status'],  // 客户类型 客户状态
  data() {
    return {
      type: '个人', // 客户类型 二网 个人 单位
      id: this.$route.query.id,
      mountedTime: undefined, // mounted时间
      activatedTime: undefined, // activated时间
      height: 626,
      saveloading: false, // 点击确认旋转轮
      form: {},
    }
  },
  mounted() {
    this.mountedTime = new Date();
    this.id = this.$route.query.id;
    this.getTenantCustomerDetail();
    // 解决表格设置固定高度导致列设置fixed后重新进来会错行问题
    this.tableHeight();
  },
  activated() {
    this.activatedTime = new Date();
    let isNew = false; // 默认不是新的
    if (this.id !== this.$route.query.id) {
      isNew = true; // 新的
    }
    this.id = this.$route.query.id;
    let seconds = getTimeSeconds(this.mountedTime, this.activatedTime);
    if (seconds >= 1 && isNew) {
      this.getTenantCustomerDetail();
    }
    // 解决表格设置固定高度导致列设置fixed后重新进来会错行问题
    this.tableHeight();
  },
  methods: {
    tableHeight() {
      this.$nextTick(() => {
        let height = document.body.clientHeight - 90 - 40;// - 62 - 20;
        // 查询表单高度
        let s_height = 0;
        // 按钮容器高度
        // let btns_height = document.getElementById('comTabel').clientHeight;
        // 计算表格的高度
        this.height = height - s_height - 20 - 44;
      });
    },

    getAmount(value) {
      return toThousandFilter(value);
    },

    cancel() {
      const obj = { path: "/basicData/customersManage" };
      this.$tab.closeOpenPage(obj);
    },

    /**
     * 折扣
     * @param {*} value 
     */
    getDiscountFormat(value) {
      if ((value == undefined || value == '' || value == null) && value !== 0) {
        return value;
      }
      return value + '%';
    },

    /**
     * 得到可以类型名称
     * @param {*} value 
     */
    getTypeName(value) {
      let show = value;
      this.dict.type.basic_data_tenant_customer_type.some((item) => {
        if (item.value === value) {
          show = item.label;
          return true;
        }
      });
      return show;
    },

    /**
     * 得到客户状态名称
     * @param {*} value 
     */
    getStatusName(value) {
      let show = value;
      this.dict.type.basic_data_tenant_customer_status.some((item) => {
        if (item.value === value) {
          show = item.label;
          return true;
        }
      });
      return show;
    },

    /**
     * 获取客户详情
     */
    getTenantCustomerDetail() {
      tenantCustomerDetail({id: this.$route.query.id}).then(res => {
        if (res.code == 200) {
          this.form = res.data;
        }
      }).catch(err => {

      });
    },

  },
}
</script>

<style lang="scss" scoped>
</style>